<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Welcome</title>
    <style>
        .container {
            width: 100%;
            height: 700px;
            border: 1px solid #AAA;
            background-color: #EEE;
        }

        .user-box {
            width: 29%;
            height: 100%;
            background-color: #DDD;
            float: left;
        }

        .message-box {
            width: 70%;
            height: 99%;
            float: right;
        }

        .message {
            width: 100%;
            height: 60%;
            overflow-x: hidden;
        }

        .text {
            width: 99.5%;
            height: 20%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="user-box"></div>
    <div class="message-box">
        <h4>☕ChatRoom</h4>
        <div class="message">
            <table id="tb">
            </table>
        </div>
        <textarea rows="6" class="text"></textarea>
        <input type="button" id="btn-close" value="Offline">
        <input type="button" id="btn-send" value="Send" title="Ctrl+Enter">
        <a href="user/logout" style="float: right">logout</a>
    </div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script type="text/javascript">
    function Server(callback) {
        this.websocket;

        if (typeof this.open != "function") {

            Server.prototype.open = function () {

                if ('WebSocket' in window) {
                    this.websocket = new WebSocket("ws://" + window.location.host + "/websocket");
                } else {
                    this.websocket = new SockJS("http://" + window.location.host + "/sockjs");
                }

                this.websocket.onopen = function (event) {
                    callback("Enter chat room");
                };

                this.websocket.onmessage = function (event) {
                    callback(event.data);
                };

                this.websocket.onerror = function (event) {
                    callback("Connection Error");
                };

                this.websocket.onclose = function (event) {
                    callback("Exit chat room");
                };
            };

            Server.prototype.close = function () {
                this.websocket.close();
            };

            Server.prototype.sendMessage = function (message) {
                this.websocket.send(message);
            };
        }
    }

    //将消息显示在网页上
    var table = document.getElementById("tb");
    var showMessage = function (message) {
        var row = table.insertRow();
        var cell = row.insertCell(0);
        cell.appendChild(document.createTextNode(message));

        if (table.rows.length > 50)
            table.deleteRow(0);
        row.scrollIntoView();
    };

    var server = new Server(showMessage);
    server.open();

    function sendMessage() {
        var value = text.val();
        if (value) {
            text.val(null);
            server.sendMessage(value);
        }
    }

    //监听窗口关闭事件
    window.onbeforeunload = function () {
        server.close();
    };

    var text = $($(".text")[0]);
    text.on("keyup", function (e) {
        if (e.ctrlKey && e.which == 13 || e.which == 10)
            sendMessage();
    });

    $("#btn-send").on("click", function () {
        sendMessage();
    });

    $("#btn-close").on("click", function () {
        if ($(this).val() == "Offline") {
            server.close();
            $(this).val("Online");
        } else {
            server.open();
            $(this).val("Offline");
        }
    });
</script>
</html>